<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>我的头像</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-------------jquery库-------------->
  	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<!-------------Amazeui--------------->
    <script type="text/javascript" src="js/amazeui.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/amazeui.css">
    <!------------核心样式-------------->
    <link rel="stylesheet" type="text/css" href="/css/user.css">
	<link rel="stylesheet" type="text/css" href="/css/style.css">
</head>

<body>
<!-------------------版头------------------->
<div th:replace="header-c"></div>

<!-----------------用户banner---------------->
<div id="user_banner">
	<div class="pic">
		<input type="file" name="imagefile" id="imagefile" placeholder="请选择要上传的图片" onchange="uploadImage()" style="display: none"/>
		<a href="#" onclick="toUploadImage()">
			<img name="headImage" id="headImage" th:src="@{${session.user.headImages}}"/>
			<div>更换头像</div>
		</a>
	</div>
	<div class="con">
		<h2>Alpha</h2>
		<p>人生旅程，不同的是沿途风景以及看风景的心情</p>
	</div>
</div>
<!-----------------快捷导航---------------->
<div id="quick_nav">
	<a th:href="@{my_index}" onmouseover="colorY(this)" onmouseout="colorW(this)"><span class="ico1"><img src="images/nav_ico1.png"/></span >个人主页</a>
	<a th:href="@{write_note}" onmouseover="colorY(this)" onmouseout="colorW(this)"><span class="ico2"><img src="images/nav_ico2.png"/></span>上架商品</a>
	<a th:href="@{my_note}" onmouseover="colorY(this)" onmouseout="colorW(this)"><span class="ico7"><img src="images/nav_ico7.png"/></span>我的商品</a>
	<a href="#" onmouseover="colorY(this)" onmouseout="colorW(this)"><span class="ico3"><img src="images/nav_ico3.png"/></span>我的收藏</a>
	<a href="#" onmouseover="colorY(this)" onmouseout="colorW(this)"><span class="ico4"><img src="images/nav_ico4.png"/></span>商品订单</a>
	<a href="#" onmouseover="colorY(this)" onmouseout="colorW(this)"><span class="ico5"><img src="images/nav_ico5.png"/></span>旅游订单</a>
	<a href="#" onmouseover="colorY(this)" onmouseout="colorW(this)"><span class="ico6"><img src="images/nav_ico6.png"/></span>我的评论</a>
</div>
<!-----------------框架---------------->
<div class="cw1000">
	<div class="w280 fl">
		<div class="public_box">
			<!-----------------设置导航---------------->
			<div id="set_nav">
				<ul>
					<li><a class="cur" th:href="@{/my_info}"><i class="ico1"></i>我的信息</a></li>
					<li><a th:href="@{my_head}"><i class="ico2"></i>我的头像</a></li>
					<li><a th:href="@{my_contact}"><i class="ico3"></i>常用联系人</a></li>
					<li><a th:href="@{/security}"><i class="ico4"></i>修改密码</a></li>
				</ul>
			</div>
		</div>
	</div>

	<div class="clear"></div>
</div>
<div style="text-align: center; position: fixed; bottom: 0; width: 100%; line-height: 150%; background: #f5f5f5; border-top: 1px solid #ddd;">
	</div>
<script type="application/javascript">
	function toUploadImage(){
		$("#imagefile").trigger("click");
	}
	/**
	 * 通过 Ajax 上传图片
	 */
	function uploadImage() {
		let formData = new FormData();
		formData.append("file", $("#imagefile")[0].files[0]);
		$.ajax({
			url: "/upload/headimage",
			type: "POST",
			data: formData,
			contentType: false,
			processData: false,
			success: function (res) {
				console.log("ajax 上传图片返回的结果是：", res);
				$("#headImage").attr("src", res.url);
			}
		});
	}
</script>
<!-----------------版底---------------->
<div th:replace="footer"></div>
</body>
</html>